/**
 * Online players — stone/gray palette (matches Store / OPE / News)
 */

.online.online--stone {
	--on-text: #d7d0c4;
	--on-muted: #8a8378;
	--on-accent: #b3a26e;
	--on-accent-soft: #d5c698;
	--on-gold: #e6c86a;
	--on-radius: 8px;
	--on-border: rgba(115, 109, 98, 0.35);
	--on-border-strong: rgba(179, 162, 110, 0.45);
	--on-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21), 0 1px 1px 0 rgba(0, 0, 0, 0.25);
	--on-card: linear-gradient(165deg, rgba(51, 49, 45, 0.92) 0%, rgba(25, 23, 20, 0.96) 100%);

	width: 100%;
	color: var(--on-text);
	font-family: var(--font-family-primary, Calibri, system-ui, sans-serif);
	animation: on-fade 0.4s ease;
}

@keyframes on-fade {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: none; }
}

/* Box title — same treatment as store */
.box.type-online > .box-head,
.box.type-default:has(.online.online--stone) > .box-head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	height: auto;
	min-height: var(--box-head-height, 48px);
	padding: 0.7rem 1rem;
	line-height: 1.2;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #d5c698;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
	background: linear-gradient(180deg, rgba(17, 17, 23, 0.55) 0%, rgba(17, 17, 23, 0.15) 100%);
	border-bottom: 1px solid rgba(179, 162, 110, 0.18);
}

.box.type-online > .box-head::before,
.box.type-online > .box-head::after,
.box.type-default:has(.online.online--stone) > .box-head::before,
.box.type-default:has(.online.online--stone) > .box-head::after {
	content: "";
	flex: 1 1 0;
	max-width: 2.5rem;
	height: 1px;
}

.box.type-online > .box-head::before,
.box.type-default:has(.online.online--stone) > .box-head::before {
	background: linear-gradient(90deg, transparent, rgba(179, 162, 110, 0.55));
}

.box.type-online > .box-head::after,
.box.type-default:has(.online.online--stone) > .box-head::after {
	background: linear-gradient(90deg, rgba(179, 162, 110, 0.55), transparent);
}

.box.type-online > .box-body,
.box.type-default:has(.online.online--stone) > .box-body {
	padding: 0.85rem 1rem 1rem !important;
	overflow: visible !important;
}

.box.type-online,
.box.type-default:has(.online.online--stone) {
	overflow: visible !important;
}

/*-------------------------------------------------------------------------*/
/* Realm filter bar
/*-------------------------------------------------------------------------*/
.online.online--stone .online__filter {
	position: relative;
	z-index: 20;
	overflow: visible;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
	margin: 0 0 0.85rem;
	padding: 0.85rem 1rem 0.85rem 1.15rem;
	border-radius: var(--on-radius);
	border: 1px solid var(--on-border);
	background: var(--on-card);
	box-shadow: var(--on-shadow);
}

.online.online--stone .online__filter::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, #d5c698, var(--on-accent));
	pointer-events: none;
}

.online.online--stone .filter__block--realm {
	position: relative;
	z-index: 25;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
	width: 100%;
	max-width: 420px;
	margin-right: auto;
	margin-left: 0;
}

.online.online--stone .filter__label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-accent-soft);
	white-space: nowrap;
}

.online.online--stone .online__select,
.online.online--stone .filter__block--realm select,
.online.online--stone .sbHolder {
	flex: 1 1 220px;
	min-width: 180px;
}

.online.online--stone .online__select,
.online.online--stone .filter__block--realm select {
	width: 100%;
	height: 2.35rem;
	padding: 0 0.75rem;
	border-radius: 6px;
	border: 1px solid var(--on-border);
	background: rgba(0, 0, 0, 0.35);
	color: var(--on-accent-soft);
	font-size: 0.82rem;
	font-weight: 600;
	outline: none;
	transition: border-color 0.15s ease;
}

.online.online--stone .online__select:focus,
.online.online--stone .filter__block--realm select:focus {
	border-color: var(--on-border-strong);
}

.online.online--stone .online__select option,
.online.online--stone .filter__block--realm select option {
	background: #1a1815;
	color: #e8e2d6;
}

/* Selectbox plugin (theme) — menu must sit above the table panel */
.online.online--stone .sbHolder {
	position: relative;
	z-index: 40;
	border-radius: 6px !important;
	border: 1px solid var(--on-border) !important;
	background: rgba(0, 0, 0, 0.35) !important;
	height: 2.35rem !important;
}

.online.online--stone .sbHolder .sbSelector {
	height: 2.35rem !important;
	line-height: 2.35rem !important;
	color: var(--on-accent-soft) !important;
	font-weight: 600 !important;
}

.online.online--stone .sbHolder .sbOptions {
	z-index: 50 !important;
	border: 1px solid var(--on-border) !important;
	background: #1a1815 !important;
}

.online.online--stone .sbHolder .sbOptions a {
	color: #e8e2d6 !important;
}

.online.online--stone .sbHolder .sbOptions a:hover,
.online.online--stone .sbHolder .sbOptions a:focus {
	background: rgba(179, 162, 110, 0.16) !important;
	color: #ebe3cf !important;
}

/*-------------------------------------------------------------------------*/
/* Table panel
/*-------------------------------------------------------------------------*/
.online.online--stone .online__panel {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: 0.95rem 1rem;
	border-radius: var(--on-radius);
	border: 1px solid var(--on-border);
	background: var(--on-card);
	box-shadow: var(--on-shadow);
}

.online.online--stone .online__panel::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: linear-gradient(180deg, #d5c698, var(--on-accent));
	pointer-events: none;
	z-index: 1;
}

.online.online--stone .online__table-wrap {
	position: relative;
	z-index: 1;
	width: 100%;
	overflow-x: auto;
}

.online.online--stone .online__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 2rem 1rem;
	color: var(--on-muted);
	font-size: 0.9rem;
}

.online.online--stone .online__loading i {
	color: var(--on-accent);
}

.online.online--stone .online__message {
	text-align: center;
	padding: 1.1rem 1rem;
	margin: 0.25rem 0;
	border-radius: 8px;
	border: 1px solid var(--on-border);
	background: rgba(0, 0, 0, 0.22);
	color: var(--on-accent-soft);
	font-size: 0.9rem;
}

.online.online--stone .online__message--danger {
	border-color: rgba(180, 90, 70, 0.45);
	color: #e0b4a8;
}

.online.online--stone .online__message--warn {
	border-color: rgba(179, 162, 110, 0.4);
	color: var(--on-accent-soft);
}

/*-------------------------------------------------------------------------*/
/* DataTables + nice_table
/*-------------------------------------------------------------------------*/
.online.online--stone .dataTables_wrapper {
	color: var(--on-text);
}

.online.online--stone .dataTables_wrapper .dataTables_length,
.online.online--stone .dataTables_wrapper .dataTables_filter,
.online.online--stone .dataTables_wrapper .dataTables_info,
.online.online--stone .dataTables_wrapper .dataTables_paginate {
	color: var(--on-muted) !important;
	font-size: 0.82rem;
	margin-bottom: 0.65rem;
}

.online.online--stone .dataTables_wrapper .dataTables_filter {
	margin-bottom: 0.85rem;
}

.online.online--stone .dataTables_wrapper .dataTables_length label,
.online.online--stone .dataTables_wrapper .dataTables_filter label {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.72rem;
	color: var(--on-muted);
}

.online.online--stone .dataTables_wrapper .dataTables_length select,
.online.online--stone .dataTables_wrapper .dataTables_filter input {
	height: 2.1rem;
	padding: 0 0.65rem;
	border-radius: 6px;
	border: 1px solid var(--on-border);
	background: rgba(0, 0, 0, 0.35);
	color: var(--on-accent-soft);
	outline: none;
}

/* Show length menu: fit 10/25/50/100/All without inner scroll */
.online.online--stone .dataTables_length .sbHolder {
	z-index: 40;
}

.online.online--stone .dataTables_length .sbHolder .sbOptions {
	max-height: none !important;
	overflow: visible !important;
	z-index: 50 !important;
}

.online.online--stone .dataTables_wrapper .dataTables_filter input:focus,
.online.online--stone .dataTables_wrapper .dataTables_length select:focus {
	border-color: var(--on-border-strong);
}

.online.online--stone .dataTables_wrapper .dataTables_length select option {
	background: #1a1815;
	color: #e8e2d6;
}

.online.online--stone table.nice_table,
.online.online--stone table.online__table,
.online.online--stone table.dataTable {
	width: 100% !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	background: transparent !important;
}

.online.online--stone table.nice_table thead th,
.online.online--stone table.online__table thead th,
.online.online--stone table.dataTable thead th {
	padding: 0.7rem 0.75rem !important;
	border: none !important;
	border-bottom: 1px solid rgba(179, 162, 110, 0.28) !important;
	background: rgba(0, 0, 0, 0.28) !important;
	color: var(--on-accent-soft) !important;
	font-size: 0.72rem !important;
	font-weight: 750 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	white-space: nowrap;
}

.online.online--stone table.nice_table tbody td,
.online.online--stone table.online__table tbody td,
.online.online--stone table.dataTable tbody td {
	padding: 0.65rem 0.75rem !important;
	border: none !important;
	border-bottom: 1px solid rgba(115, 109, 98, 0.18) !important;
	background: rgba(0, 0, 0, 0.16) !important;
	color: var(--on-text) !important;
	font-weight: 500 !important;
	vertical-align: middle !important;
}

.online.online--stone table.nice_table tbody tr:hover td,
.online.online--stone table.online__table tbody tr:hover td,
.online.online--stone table.dataTable tbody tr:hover td {
	background: rgba(17, 17, 23, 0.85) !important;
}

.online.online--stone table.nice_table tbody tr:last-child td,
.online.online--stone table.dataTable tbody tr:last-child td {
	border-bottom: none !important;
}

.online.online--stone table tbody td a {
	color: var(--on-accent-soft) !important;
	font-weight: 700;
	text-decoration: none !important;
	transition: color 0.15s ease;
}

.online.online--stone table tbody td a:hover {
	color: #ebe3cf !important;
}

.online.online--stone table tbody td img {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	border-radius: 3px;
	box-shadow: 0 0 0 1px rgba(115, 109, 98, 0.35);
}

/* Pagination */
.online.online--stone .dataTables_wrapper .dataTables_paginate .paginate_button {
	padding: 0.35rem 0.65rem !important;
	margin: 0 0.12rem !important;
	border-radius: 6px !important;
	border: 1px solid var(--on-border) !important;
	background: rgba(0, 0, 0, 0.28) !important;
	color: var(--on-muted) !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
}

.online.online--stone .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
	border-color: var(--on-border-strong) !important;
	background: rgba(17, 17, 23, 0.85) !important;
	color: var(--on-accent-soft) !important;
}

.online.online--stone .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.online.online--stone .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
	border-color: rgba(179, 162, 110, 0.55) !important;
	background: linear-gradient(145deg, #d5c698, var(--on-accent)) !important;
	color: #1f1d18 !important;
}

.online.online--stone .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.online.online--stone .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
	opacity: 0.45;
	color: var(--on-muted) !important;
	background: rgba(0, 0, 0, 0.18) !important;
}

@media screen and (max-width: 767px) {
	.online.online--stone .filter__block--realm {
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}

	.online.online--stone .dataTables_wrapper .dataTables_length,
	.online.online--stone .dataTables_wrapper .dataTables_filter {
		float: none !important;
		text-align: left !important;
		width: 100%;
	}
}